<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
        padding:2px 20px 0;
        color: #ccc;
    }

    .wrong {
        color: red;
        background: url(images/error.png) no-repeat;
        
    }

    .right {
        color: green;
        background: url(images/right.png) no-repeat;
    }

    .pwd {
        width: 220px;
        height: 20px;
        background: url("images/strong.jpg") no-repeat;
    }
    .str1{
        background-position: 0 -20px;
    }
    .str2{
        background-position: 0 -40px;
    }
    .str3{
        background-position: 0 -60px;
    }
    .str4{
        background-position: 0 -80px;
    }
</style>

<!-- <script>
    window.onload = function () {
        //需求：按照需求，对表单数据进行校验！
        //步骤：
        //1.老三步
        //2.判断是否符合正则标准
        //3.给样式。（封装方法给）


//        var inp1 = document.getElementById("inp1");
//        var inp2 = document.getElementById("inp2");
//        var inp3 = document.getElementById("inp3");
//        var inp4 = document.getElementById("inp4");
//        var inp5 = document.getElementById("inp5");
//        var inp6 = document.getElementById("inp6");
        var password = document.getElementById("password");

//        inp1.onblur = function () {
//            var span = this.nextElementSibling || this.nextSibling;
//            if(/^[1-9][0-9]{4,}$/.test(this.value)){
//                span.innerHTML = "恭喜您,输入正确！";
//                span.className = "right";
//            }else{
//                span.innerHTML = "格式错误！";
//                span.className = "wrong";
//            }
//        }

        //qq号
        addEvent("inp1", function () {
            if(/^[1-9][0-9]{4,}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });

        //手机号
        addEvent("inp2", function () {
            if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });

        //邮箱
        addEvent("inp3", function () {
            if(/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //座机
        addEvent("inp4", function () {
            if(/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //用户名
        addEvent("inp5", function () {
            if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });


        //密码
        addEvent("inp6", function () {
            if(/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)){
                setClassName(this,"right");
                setInnerHTML(this,"恭喜您,输入正确！");
                password.className = "pwd str1";
                //只有密码通过了，才能执行密码强度测试
                //从大往小判断。
                if(/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)){
                    password.className = "pwd str4";
                }else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)){
                    password.className = "pwd str3";
                }else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
                    password.className = "pwd str2";
                }


            }else{
                setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
            }
        });




        //因为每次都要这样调用，所以很繁琐，我们通过封装实现代码
        function addEvent(str,fn){
            document.getElementById(str).onblur = fn;
        }

        function setClassName(aaa,txt){
            var span = aaa.nextElementSibling || this.nextSibling;
            span.className = txt;
        }
        function setInnerHTML(aaa,txt){
//            console.log(this);
            var span = aaa.nextElementSibling || this.nextSibling;
            span.innerHTML = txt;
        }
    }
</script> -->

<script type="text/javascript">
	window.onload = function () {
		var password = document.getElementById("password");
		addEvent("inp1",function(){
			if(/^[1-9][0-9]{4,}$/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您，输入正确！");
			}else{
				setClassName(this,"wrong");
				setInnerHTML(this,"格式错误!");
			}
		});
		addEvent("inp2",function(){
			if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您，输入正确！");
			}else{
				setClassName(this,"wrong");
				setInnerHTML(this,"格式错误！");
			}
		});
		addEvent("inp3",function(){
			if(/^[\w\-\.]{5,}\@[\w]+\.[\w]{2,4}$/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您，输入正确！");
			}else{
				setClassName(this,"wrong");
				setInnerHTML(this,"格式错误！");
			}
		});
		addEvent("inp4",function(){
			if(/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您，输入正确！");
			}else{
				setClassName(this,"wrong");
				setInnerHTML(this,"格式错误！");
			}
		});
		addEvent("inp5",function(){
			if(/^[a-zA-Z0-9_-]{3,16}$/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您,输入正确！");
			}else{
				setClassName(this,"wrong");
                setInnerHTML(this,"格式错误！");
			}
		});
		addEvent("inp6",function(){
			if(/^[a-zA-Z0-9_\-$]{6,18}$/.test(this.value)){
				setClassName(this,"right");
				setInnerHTML(this,"恭喜您,输入正确！");
				password.className = "pwd str1";
				if(/^[A-Za-z0-9]+[_$][A-Za-z0-9]*$/.test(this.value)){
                    password.className = "pwd str4";
                }else if(/^([a-z].*[0-9])|([A-Z].*[0-9])|[0-9].*[a-zA-Z]$/.test(this.value)){
                    password.className = "pwd str3";
                }else if(/^([a-z].*[A-Z])|([A-Z].*[a-z])$/.test(this.value)){
                    password.className = "pwd str2";
                }
			}else{
				setClassName(this,"wrong");
				setInnerHTML(this,"格式错误！");
			}
		});
		
		function addEvent(str,fn){
			document.getElementById(str).onblur = fn;
		}
		function setClassName(aaa,txt){
			var span = aaa.nextElementSibling || this.nextSibling;
			span.className = txt;
		}
		function setInnerHTML(aaa,txt){
			var span = aaa.nextElementSibling || this.nextSibling;
			span.innerHTML = txt;
		}
		
	}
</script>

<body>
    <div class="container">
        <label for="inp1">QQ</label><input type="text" id="inp1"><span>输入正确的QQ号码</span><br>
        <label for="inp2">手机</label><input type="text" id="inp2"><span>输入13位手机号码</span><br>
        <label for="inp3">邮箱</label><input type="text" id="inp3"><span>输入正确邮箱</span><br>
        <label for="inp4">座机</label><input type="text" id="inp4"><span>输入您的座机</span><br>
        <label for="inp5">账号</label><input type="text" id="inp5"><span>亲输入您的账号</span><br>
        <label for="inp6">密码</label><input type="text" id="inp6"><span>请输入您的密码</span><br>
        <div id="password" class="pwd"></div>
    </div>
</body>
</html>